<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
        margin: 8px;
        font-size: 16px;
        }
    </style>
</head>
<body>

    <div id="app">
       <input type="text" v-model="keyword">
       <button @click="filterBlogs">搜索</button>
        <ul>
            <li v-for="item in blogs" :key="item.id">
               <p v-html="item.title"></p>
            </li>
        </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{ 
                blogs:[],
                keyword:""
            },
            methods:{
                filterBlogs(){
                    this.blogs = this.blogs.filter((blog)=>{
                        let arr = blog.title.match(this.keyword)
                        return arr
                    })
                    let reg = new RegExp(this.keyword,'ig')
                    let itemArray = this.blogs.map((item,index,selfArr) => {
                      return  {
                        id:item.id,
                        title:item.title.replace(reg,'<span style="color:red">'+this.keyword+'</span>')
                      }
                    });
                    this.blogs = itemArray
                }
            },
            created() {
                fetch('https://ty.php800.cn/api/article/list.php',{
                    headers:{
                        SAT:"1234567"
                    }
                }).then((response)=>response.json())
                .then((response)=>{
                    this.blogs = response.blogs
                })

            },
        });
    </script>
</body>
</html>